<template>
  <div>
    <swiper :options="swiperOption">
        <!-- 使用计算属性中的函数，直接当data中的数据使用即可，pages是一个二维数组，page表示第一个数组，index表示索引，共有2个数组，所以swiper-slide控制第二页的滑动显示，由于是计算属性下的数据，所以data上的数据的改变，计算属性会重新计算，动态改变展示的内容 -->
      <swiper-slide v-for='(page,index) in pages' :key='index'>
        <ul class="icons-box">
          <li v-for='item in page' :key='item.id'>
            <img :src="item.imgUrl" alt>
            <p>{{item.desc}}</p>
          </li>
        </ul>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "homeIcons",
  props:{
   list:Array
  },
  data (){

      return {
          swiperOption:{
            autoplay:false
          }
         
      }
      
  },
  computed: {
      pages (){
        //   遍历iconList里的每一项数据，前8个数据page=0，pages二维数组中的第1个数组中装着前8个数据，第9个数据开始，page=1，pages二维数组中第2个数组装着9-18的数据
          const pages=[]
          this.list.forEach((item,index)=>{
              const page=Math.floor(index/8)
              if(!pages[page]){
                  pages[page]=[]
              }
              pages[page].push(item)
          })
          return pages
      }
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/styles/common.less";
.icons-box {
  width: 100%;
  height: 3.6rem;
  overflow: hidden;
  li {
    padding-top: 0.2rem;
    float: left;
    width: 25%;
    height: 1.6rem;
    text-align: center;
    img {
      width: 1.1rem;
      height: 1.1rem;
    }
    p {
      font-size: 14px;
      margin-top: 0.1rem;
      color: @darkTextColor;
    //   引用less中单行溢出显示函数...
      .oneLine();
    }
  }
}
</style>
